<template>
  <div class="L-main-container">
    <div class="L-main-box" v-for="(item, index) in data.mainData" :key="index">
      <div class="L-big-text">{{ item.title }}</div>
      <van-row class="L-margin-top-20">
        <van-col @click="handleClick(sitem)" :span="6" class="L-main-item" v-for="(sitem, sindex) in item.value"
          :key="sindex">
          <div><img class="main-icon" :src="sitem.icon" /></div>
          <div class="L-small-text">{{ sitem.stitle }}</div>
        </van-col>
      </van-row>
    </div>

    <van-floating-bubble axis="xy" icon="chat" magnetic="x" v-model:offset="offset" @click="showBottom = true">
      <template #default>
        <img src="@/assets/images/ai.apng" style="width: 80%;" alt="">
      </template>
    </van-floating-bubble>

   
    <van-popup v-model:show="showBottom" closeable round position="bottom" :style="{ height: '95%' }">
      <template #default>

        <!-- <div> -->
          <iframe src="https://www.jkbnet.com:8899/" width="100%" height="99.5%" frameborder="0"></iframe>
         
        <!-- </div> -->
      </template>


    </van-popup>



  </div>
  <div class="L-bottom-space"></div>
  <Tabbar />
</template>

<script setup lang="ts" name="main">

import { ref, onMounted, reactive, toRefs, onActivated } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { useCheck } from "@/hooks/hooks.js";
const { checkCustomized } = useCheck();

import Tabbar from "@/components/common/Tabbar.vue";
const showBottom = ref(false)

interface moduleItem {
  icon: string;
  idobject: string;
}

const offset = ref({ x: -20, y: 340 });

import {
  showLoadingToast,
  closeToast,
  showDialog,
  showToast,
  showNotify,
} from "vant";

import { defaultMenu } from "@/request/api/api";

const data = reactive({
  mainData: [],
});

import { getAccessToken, getJsApiTicket } from "@/utils/wexin.js";
// import {CryptoJS} from 'crypto-js'
onMounted(() => {
  getData();
});



onActivated(() => { });



function getData() {
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });
  defaultMenu().then((res) => {
    data.mainData = res.data?.jsondata?.menu[0] || [];
    closeToast();
  });
}

import { useRouterStore } from "@/stores/router";
const routerStore = useRouterStore();

function handleClick(item) {
  const path = checkCustomized(`/${item.idobject}`)
    ? item.idobject
    : "/default";
  routerStore.mode = "reload";
  router.push({
    path,
    query: {
      idobject: item.idobject,
      idtemplate: item.idtemplate,
      stitle: item.stitle,
    },
  });
}

// toRefs(data)
</script>
<style>
.van-floating-bubble {
  /* background: linear-gradient(45deg, #d18599, #347cef); */
  background: linear-gradient(to right, #3ee8ff, #5a50f7);
}

.ai-box {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 30%;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #eee;

  display: flex;
  align-items: center;
  justify-content: center;
}

.L-main-container {
  /* padding: 20px; */
  position: relative;
}

.L-main-box {
  padding: 15px;
  width: 100%;
  /* border-radius: 10px; */
  background: #fff;
  /* margin: 20px auto; */
}

.L-main-item {
  text-align: center;
  height: 100px;
}

.L-main-item .main-icon {
  width: 40px;
}
</style>